<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="./css/base.css">
    <link rel="stylesheet" type="text/css" href="./css/index.css">
    <link rel="stylesheet" type="text/css" href="./css/animate.css">
</head>
<body>
    <div class="main">
        <div class="header">
            <div class="header_wrap">
                <div class="header_logo"></div>
                <div class="header_content">华为手机</div>
                <div class="header_nav">
                    <a href="##" class="nav_item">首页</a>
                    <a href="##" class="nav_item">外观</a>
                    <a href="##" class="nav_item">配置</a>
                    <a href="##" class="nav_item">型号</a>
                    <a href="##" class="nav_item">说明</a>
                    <a href="##" class="nav_item_button">立即购买</a>
                </div>
            </div>
        </div>
        <div class="screen_one">
            <div class="screen_one_heading screen_one_heading_animate_init"><b>华为手机</b> 让你的生活更精彩</div>
            <div class="screen_one_phone screen_one_phone_animate_init"></div>
            <div class="screen_one_shadow screen_one_shadow_animate_init"></div>
        </div>
        <div class="screen_two">
            <h2 class="screen_two_heading">优美的设计，更令人着迷</h2>
            <h3 class="screen_two_subheading">
                采用受欢迎的设计，让它更加出色。<br><br>
                款式小巧，轻便手感更舒适。绚丽高清的显示屏，整个外观显得格外精致。
            </h3>
            <div class="screen_two_phone"></div>
            <div class="screen_two_point1">
                <span>高清摄像</span>
                <span class="img_right"></span>
            </div>
            <div class="screen_two_point2">
                <span class="img_left"></span>
                <span>超薄机身</span>
            </div>
            <div class="screen_two_point3">
                <span class="img_left"></span>
                <span> 大屏显示</span>
            </div>
        </div>
        <div class="screen_three">
            <h2 class="screen_three_heading">外形小巧，功能强大的手机</h2>
            <h3 class="screen_three_subheading">
                采用受欢迎的设计，让它更加出色<br><br>
                款式小巧，轻便手感更舒适。绚丽高清的显示屏，整个外观显得格外精致。
            </h3>
            <div class="screen_three_features">
                <div class="fearures_item">
                    <div class="item_number">5.7</div>
                    <div class="item_desc">英寸大屏</div>
                </div>
                <div class="fearures_item">
                    <div class="item_number">4800</div>
                    <div class="item_desc">万像素</div>
                </div>
                <div class="fearures_item">
                    <div class="item_number">3D</div>
                    <div class="item_desc">touch</div>
                </div>
                <div class="fearures_item">
                    <div class="item_number">麒麟980</div>
                    <div class="item_desc">处理器</div>
                </div>
            </div>
            <div class="screen_three_phone"></div>
        </div>
        <div class="screen_four">
            <h2 class="screen_four_heading">丰富的手机型号</h2>
            <h3 class="screen_four_subheading">找到适合你的手机</h3>
            <div class="screen_four_type">
                <div class="screen_four_typeItem1"></div>
                <div class="screen_four_typeItem2"></div>
                <div class="screen_four_typeItem3"></div>
                <div class="screen_four_typeItem4"></div>
            </div>
            <div class="screen_four_content">
                <div class="screen_four_typeContent1">
                    <span class="span1">中国红</span>
                    <span class="span2">16G/32G/64G</span>
                </div>
                <div class="screen_four_typeContent2">
                    <span class="span1">土豪金</span>
                    <span class="span2">16G/32G/64G</span>
                </div>
                <div class="screen_four_typeContent3">
                    <span class="span1">太空灰</span>
                    <span class="span2">16G/32G/64G</span>
                </div>
                <div class="screen_four_typeContent4">
                    <span class="span1">绅士黑</span>
                    <span class="span2">16G/32G/64G</span>
                </div>
            </div>
        </div>
        <div class="screen_five">
            <h2 class="screen_five_heading">游戏、学习、拍照、有这一部就够了</h2>
            <h3 class="screen_five_subheading">看视频、拍摄高清视频与照片、视频聊天、一机多功能，让您生活更丰富精彩。</h3>
            <div class="screen_five_bg"></div>
        </div>
        <div class="screen_buy">
            <a class="button_buy" href="##">立即购买</a>
        </div>
        <div class="footer">
            © 2019 huawei.com 京ICP备13046642号
        </div>
        <div class="outline">
            <a href="##" class="outline_item">首页</a>
            <a href="##" class="outline_item">外观</a>
            <a href="##" class="outline_item">配置</a>
            <a href="##" class="outline_item">型号</a>
            <a href="##" class="outline_item">说明</a>
        </div>
    </div>   
</body>
<script type="text/javascript" src="js/index.js">

</script>
</html>